<template>
  <el-dialog :visible.sync="dialogVisible"
             @close="handleCancel"
             :title="dialogTitle">
    <!-- 对话框内容 -->
    <el-form ref="form"
             label-width="100px">
      <el-form-item label="部门">
        <DepartmentCascader @SelectDepartment="SelectDepartment" />
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <!-- 自定义确定按钮的事件 -->
      <el-button @click="handleConfirm"
                 type="primary">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DepartmentCascader from '@/components/Tools/DepartmentCascader'
export default {
  components: {
    DepartmentCascader
  },
  props: {
    dialogTitle: {
      type: String, // 对话框标题
      default: '编辑'
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      dialogVisible: false,
      departmentId: null
    };
  },
  watch: {
    visible: {
      immediate: true,
      handler (val) {
        this.dialogVisible = val
      }
    }
  },
  methods: {
    handleConfirm () {
      // 触发自定义事件
      this.$emit('custom-confirm', this.departmentId);

      // 关闭对话框,初始化数据
      // this.departmentId = null
      this.dialogVisible = false;

    },
    SelectDepartment (id) {
      console.log('d', id)
      this.departmentId = id
    },
    // 关闭事件回调
    handleCancel () {

      this.dialogVisible = false;
      this.departmentId = null

      this.$emit("custom-close")
    },
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
